
<template>
  <div>
    <Form
      :model="formItem"
      class="from-box2"
      ref="formValidate"
      :rules="ruleValidate"
      :label-width="120"
    >
      <Form-item class="Form-items" label="新密码" prop="password">
        <div class="item-boxs">
          <Input
            v-model="formItem.password"
            type="password"
            class="input-box"
            placeholder="请输入手机号"
          />
        </div>
      </Form-item>
      <Form-item class="Form-items" label="再次输入" prop="againPassword">
        <div class="item-boxs">
          <Input
            v-model="formItem.againPassword"
            type="password"
            class="input-box"
            placeholder="请输入手机号"
          />
        </div>
      </Form-item>

      <!-- <Form-item class="Form-items" prop="roleName"> -->
        <div class="footer-box">
          <Button class="footer-btu" @click="closeModel()">返回</Button>
          <Button class="footer-btu" type="primary" @click="confirm" >确定</Button>
        </div>
      <!-- </Form-item> -->
    </Form>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    // 密码验证
    const pwdCheck = async (rule, value, callback) => {
    //   let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~@#$%\*-\+=:,\\?\[\]\{}]).{6,16}$/
      if (value.length < 6) {
        this.changeFlag = 2
        return callback(new Error('密码不能少于6位！'))
      } else if (value.length > 16) {
        this.changeFlag = 2
        return callback(new Error('密码最长不能超过16位！'))
      } else {
        this.changeFlag = 1
        callback()
      }
    }
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (value.length < 1) {
        this.changeAgainFlag = 2
        return callback(new Error('重复密码不能为空！'))
      } else if (this.formItem.password !== this.formItem.againPassword) {
        this.changeAgainFlag = 2
        return callback(new Error('两次输入密码不一致！'))
      } else {
        this.changeAgainFlag = 1
        callback()
      }
    }
    return {
      formItem: {
        password: '',
        againPassword: ''
      },
      AlarmLevelList: [],
      ruleValidate: {
        password: [
          { required: true, validator: pwdCheck, trigger: 'blur' }
        ],
        againPassword: [
          { required: true, validator: pwdAgainCheck, trigger: 'blur' }
        ]
      },
      show: true,
      count: '',
      timer: null
    }
  },
  mounted () {},
  methods: {
    confirm () {
      let that = this
      that.$refs['formValidate'].validate((valid) => {
        if (valid) {
          that.$emit('updatePwd', this.formItem)
        } else {
          // this.$Message.error('表单验证失败!');
        }
      })
    },
    closeModel () {
      this.$emit('backUser')
    }
  }
}
</script>
<style lang="less" scoped>
.from-box2 {
  width: 500px;
  margin: 0 auto;
  .item-boxs {
    height: 58px;
    position: relative;
    .input-box {
      height: 58px;
    }
    img {
      width: 32px;
      height: 32px;
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
    }
    /deep/ .ivu-input-inner-container {
      height: 58px;
    }
    /deep/ .ivu-input {
      height: 58px;
      font-size: 16px;
    }
    /deep/ .ivu-form-item-content {
      font-size: 16px;
    }

  }
   /deep/ .ivu-form-item-label {
        font-size: 16px !important;
        line-height: 38px;
    }
  .footer-box {
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    .footer-btu {
      width: 222px !important;
      height: 54px !important;
      font-size: 18px;
    }
  }
  .Form-items {
    margin-bottom: 30px;
  }
  .phone-boxs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .codebtus {
      height: 100%;
      width: 122px !important;
      font-size: 18px;
    }
  }
}
</style>
